<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask">

    </div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet consectetur dolor ducimus labore magni
            officiis pariatur quas suscipit, veritatis! Adipisci aliquid architecto dolores officiis possimus qui, quos
            rem. Excepturi!
        </div>
        <div>Dolore harum labore optio quasi, reiciendis repellat sunt? Accusantium aut fuga in magnam modi nisi omnis
            quam tenetur? Adipisci corporis cumque minima numquam obcaecati qui, quia quidem quis reprehenderit
            suscipit.
        </div>
        <div>Ab alias aliquam animi architecto consectetur corporis cum cupiditate eveniet explicabo hic id inventore
            ipsa magnam, mollitia nam nisi nostrum perferendis possimus provident quaerat quasi qui, quidem sunt unde
            voluptate?
        </div>
        <div>Amet assumenda autem cupiditate delectus dignissimos enim facilis impedit inventore laborum laudantium
            mollitia nesciunt obcaecati officiis omnis porro quibusdam quos reprehenderit repudiandae, tempore veniam.
            Autem fugiat odit quas repellendus suscipit.
        </div>
        <div>Aliquam aliquid, est laboriosam nobis nulla qui quisquam! Architecto consequatur consequuntur culpa,
            distinctio doloremque dolores earum eveniet fuga fugit minus nam nesciunt porro provident quam quas quidem
            soluta ut voluptatum.
        </div>
        <div>A commodi fugiat inventore ipsam nihil, optio placeat. Accusamus ad commodi consequuntur dignissimos dolor
            dolorem eveniet expedita explicabo facere impedit iure laudantium maiores, nesciunt omnis pariatur, quae
            ratione recusandae soluta?
        </div>
        <div>Ab dolor earum error et exercitationem expedita fuga, in iste laboriosam modi mollitia natus non numquam
            optio quae recusandae reiciendis sed velit voluptates voluptatibus? Ad doloribus enim fugiat itaque magni.
        </div>
        <div>Aut dolore eum eveniet labore nam repellendus, similique veniam. Aperiam est labore numquam odio quisquam.
            Accusamus ad aperiam asperiores laudantium, magnam maxime necessitatibus quaerat quasi quibusdam quisquam
            repellat saepe totam.
        </div>
        <div>Commodi cupiditate dolorum esse facere maxime non sed. A consectetur, cumque earum, explicabo iste
            molestias mollitia nemo nulla numquam perferendis porro quia totam ullam! Corporis delectus nisi non officia
            ullam!
        </div>
        <div>Amet architecto asperiores, consequuntur delectus eos et ex ipsam, laboriosam laudantium libero mollitia
            porro provident quidem quisquam voluptatum? Adipisci autem culpa dicta dolorum illo ipsum minima minus
            molestias neque veritatis?
        </div>
        <div>Accusamus, adipisci animi asperiores aspernatur atque autem commodi cumque deleniti dolor doloribus
            eligendi fuga id laboriosam nam nisi non nostrum odio placeat porro provident, quas sed sequi totam ullam
            voluptate!
        </div>
        <div>A cumque dicta doloribus ducimus facere id, perferendis placeat quisquam reprehenderit voluptas! A
            accusamus adipisci amet consequuntur corporis cum delectus facilis labore, laborum nesciunt nostrum pariatur
            placeat sit veniam voluptatem.
        </div>
        <div>Alias amet architecto aut beatae culpa, deserunt eos est eum facere impedit ipsa iusto laudantium modi
            pariatur porro quae, quo rem repellendus saepe sint soluta tempore temporibus veniam voluptates
            voluptatibus!
        </div>
        <div>Accusamus debitis exercitationem laborum ratione temporibus. Accusamus ad animi beatae, cupiditate,
            distinctio dolores error et, excepturi iste neque nulla officiis omnis perspiciatis quas quibusdam rem
            veniam voluptatum. Aut, omnis, suscipit.
        </div>
        <div>Adipisci aliquam aspernatur ducimus eligendi enim, eum iusto nihil officiis omnis voluptate. Adipisci at
            atque beatae blanditiis consequuntur, distinctio enim eveniet iusto molestias nisi nostrum quod repellendus
            tempore. Ea, mollitia.
        </div>
        <div>Asperiores at atque aut cumque debitis doloremque, exercitationem harum inventore itaque molestiae
            molestias mollitia nihil nisi non odio officiis placeat qui repellat repellendus rerum, saepe sapiente
            soluta totam veritatis voluptate.
        </div>
        <div>Adipisci, architecto atque consequuntur dolorem eum minima minus modi nemo nostrum odio quas quos
            recusandae reiciendis tempore, ut. Dignissimos distinctio error esse sint. Consectetur dicta doloremque
            molestias quaerat quo, voluptate!
        </div>
        <div>Ab amet aut blanditiis debitis dignissimos dolores ea enim error ex explicabo id incidunt ipsum iure iusto
            laborum modi nam, numquam perferendis quas ratione sunt tempora unde veritatis vero voluptates.
        </div>
        <div>Aspernatur assumenda beatae commodi cumque cupiditate enim et harum illum in inventore, magnam, molestias
            mollitia nihil quam, saepe sint voluptates. Deleniti nesciunt placeat quasi quis reiciendis reprehenderit
            saepe, sunt voluptate!
        </div>
        <div>Blanditiis deserunt distinctio excepturi facere itaque neque possimus unde! Accusantium adipisci assumenda
            blanditiis, dolore eaque facere nulla quos sint. Accusantium at delectus illo ipsam laborum minus molestiae
            quam recusandae sit.
        </div>
        <div>Accusantium aliquid asperiores blanditiis consequuntur dolorem dolorum enim, harum ipsam modi non nulla
            obcaecati perferendis perspiciatis quaerat quasi ratione, ullam voluptatibus? Dignissimos dolore doloribus
            eveniet laudantium nulla placeat quod repellat.
        </div>
        <div>Autem cumque eligendi error explicabo hic iste, neque perferendis, quaerat quo quod rerum sint temporibus
            vel. A delectus eligendi ex ipsa magnam numquam officia pariatur placeat quidem? Accusamus, pariatur, vitae!
        </div>
        <div>Aperiam, et, tempora! Aliquam autem doloremque dolores eaque impedit itaque labore modi molestias natus,
            nobis quis quod reprehenderit, sit ut velit! Amet consectetur dolore dolorum est magni nihil optio tempora!
        </div>
        <div>Consequatur corporis cupiditate doloribus, eligendi enim expedita minima, mollitia nam nemo nisi odit qui,
            tempora voluptatem? Animi dicta, ducimus est explicabo fugiat iste iure minus perspiciatis quibusdam
            ratione, tempore tenetur?
        </div>
        <div>Assumenda doloremque dolorum enim esse fugiat laudantium odit officia officiis quos repellat reprehenderit
            sed sequi sint sit tenetur, veniam, voluptates? A architecto culpa error itaque iure nemo nesciunt quisquam
            velit.
        </div>
        <div>Excepturi id impedit magni, nam perferendis possimus quisquam voluptatibus! Ab amet, aperiam consequuntur
            culpa dolor doloremque earum facilis labore magnam nihil non odit rerum sapiente. Amet corporis nulla
            perspiciatis. In.
        </div>
        <div>Dolores, quisquam, velit. Architecto, aut commodi impedit incidunt inventore ipsum minus molestias
            obcaecati quas sunt tempora temporibus. Adipisci commodi eaque fugiat iusto libero maxime molestiae natus
            quae, quibusdam suscipit voluptates.
        </div>
        <div>Adipisci aliquam autem beatae blanditiis consequatur dicta dolores, enim ex explicabo fuga hic, ipsum
            libero necessitatibus neque nihil numquam odio perferendis repellat soluta sunt totam ullam, ut veniam vero
            voluptates.
        </div>
        <div>Accusamus adipisci aliquam, aspernatur at autem ducimus eos error esse est facilis fugit harum id in, iure
            maiores modi molestiae omnis pariatur perspiciatis quae repudiandae rerum sequi sunt veniam vero?
        </div>
        <div>Ducimus eos est eum impedit in incidunt, labore laborum necessitatibus odit quam, quis sequi, velit?
            Adipisci aspernatur exercitationem incidunt inventore magni nesciunt provident sunt ut? Debitis doloremque
            facere numquam quod.
        </div>
        <div>Aliquam assumenda commodi consequuntur delectus earum eum id illo illum iusto, minima molestias
            necessitatibus, perferendis provident quaerat recusandae repellat repudiandae sed sequi tempore ut vel velit
            vitae voluptatibus! Eos, minus.
        </div>
        <div>Aliquam assumenda aut dolorem doloribus ducimus error eveniet harum illo impedit in ipsum magni nihil
            officia quae, quam, quidem quos saepe voluptas. Accusantium aspernatur doloremque facilis illum nemo officia
            provident.
        </div>
        <div>Dolores eaque est excepturi ipsa nemo, tempore tenetur veritatis? Aliquid, blanditiis quis. Aliquid
            aspernatur commodi deleniti doloremque doloribus ea ex magnam maiores maxime, molestiae nihil nostrum odio
            omnis saepe voluptatum.
        </div>
        <div>Doloribus eaque, est illo iste natus nobis officiis pariatur! Alias beatae commodi deserunt magnam nobis
            quod ratione tempora! Ab, fuga, magni? Accusamus dignissimos dolorum maxime obcaecati quidem! Ex,
            reprehenderit, rerum?
        </div>
        <div>Ab assumenda atque delectus dignissimos distinctio dolor dolorum ea earum est ipsa magnam maiores mollitia
            necessitatibus nisi odio porro qui quia quibusdam quod, recusandae reiciendis similique sint ullam veritatis
            voluptates.
        </div>
        <div>Accusantium dignissimos, earum eligendi exercitationem illo impedit, labore non perspiciatis quas quisquam
            reiciendis reprehenderit repudiandae sequi. Corporis doloremque, enim eum illum inventore magnam officiis
            perspiciatis quasi quo quos vel vero.
        </div>
        <div>Ad asperiores autem consequatur distinctio ea earum error est excepturi exercitationem expedita, fuga harum
            hic incidunt ipsum iure minima, molestiae necessitatibus nisi odio pariatur perferendis sint velit vero
            voluptate voluptatum.
        </div>
        <div>Cum, deleniti, sapiente. Dolorum laboriosam, ratione. A accusamus alias architecto asperiores consequatur
            culpa explicabo facilis harum id itaque laudantium modi mollitia possimus rem repellat sint soluta, unde
            voluptatibus. Ut, voluptatum?
        </div>
        <div>Ab, accusamus autem blanditiis dolores esse eum, ex hic illo illum ipsam iste iusto maxime necessitatibus
            nihil pariatur provident, quam quasi qui quisquam sunt totam veniam vero vitae voluptatem voluptatibus.
        </div>
        <div>Ab, assumenda, consectetur delectus deleniti labore laborum magni maxime molestias neque nobis praesentium
            quae, reprehenderit sequi sint suscipit temporibus ullam. Adipisci aut corporis dolor laboriosam nam
            necessitatibus possimus sed voluptate!
        </div>
        <div>Alias animi corporis cupiditate earum eius fuga ipsa laborum molestias, perferendis porro quisquam rerum
            tempora voluptatibus. Alias aliquid debitis deserunt explicabo fugit harum, ipsum quibusdam quos ullam!
            Perspiciatis, repellendus, tempore.
        </div>
        <div>Autem corporis debitis error est eveniet, fugit illo nam necessitatibus nesciunt nobis obcaecati reiciendis
            repellat repellendus rerum saepe totam velit voluptas? Accusamus dolore minima porro sit temporibus? Eius,
            mollitia tempore.
        </div>
        <div>Asperiores facilis minima nisi officia provident quis vel? Aliquid animi aspernatur cupiditate delectus
            facere, fugit harum itaque iusto neque nesciunt pariatur placeat praesentium provident, rem, repellendus
            reprehenderit saepe sapiente veritatis.
        </div>
        <div>Aut commodi consequatur dicta dolor doloribus esse eveniet excepturi facere facilis necessitatibus nostrum
            officiis, ratione sapiente sequi ut vitae, voluptatum? Beatae blanditiis consequuntur ea, iste maxime
            nesciunt odio suscipit veniam.
        </div>
        <div>A aspernatur aut dolor eius, eos eveniet ex illo inventore iure minima nam nemo nisi, odit quas qui
            recusandae rem reprehenderit sed sequi vero. Dicta eius esse exercitationem labore nisi.
        </div>
        <div>Accusantium aliquid autem cum deserunt iusto labore laboriosam molestiae mollitia nam optio praesentium,
            provident qui rerum saepe similique? At cupiditate dolore ipsam magni omnis optio possimus quae repellendus
            sequi tempora.
        </div>
        <div>Accusamus accusantium aspernatur, consequatur consequuntur dolorem id laborum, natus nisi rerum, temporibus
            veniam voluptates? Aut cum deserunt dicta, eos error incidunt ipsam laboriosam nesciunt quia repellat sit
            temporibus veritatis voluptatum?
        </div>
        <div>Amet asperiores at aut ea, fugiat inventore iste maxime quo repudiandae voluptate. Ab adipisci aspernatur
            at deserunt est ex excepturi iure labore nihil officia pariatur praesentium quia, repellat, repellendus
            unde.
        </div>
        <div>A accusamus aspernatur deserunt dolore error impedit mollitia nobis odit omnis repellendus reprehenderit
            saepe, sed sunt voluptatem voluptatum! Architecto blanditiis laudantium rem unde. Cupiditate dolorum
            eligendi, laboriosam laborum quis recusandae!
        </div>
        <div>Accusantium aliquid assumenda blanditiis cupiditate deserunt dicta, esse est, eum exercitationem illum iste
            iure maiores minima molestias repellendus, temporibus vero vitae voluptatibus. Ad cumque debitis eveniet
            itaque molestias, quam quod!
        </div>
    </div>

</body>
</html>